import {observable, autorun} from 'mobx'
import {observer} from "mobx-react";
import React, {Component} from 'react';


const list = observable([1, 2, 4]);

autorun(() => {
  // 使用slice或map将observable array转为js数组
    console.log(list.slice())
})
@observer class tmp extends Component {
    componentDidMount() {
        setTimeout(() => {
            list[1] = 1000
            // 不要对observable直接赋值
            // list = list.map(v => v+1)
            // 这是mobx提供的方法 https://cn.mobx.js.org/refguide/array.html
            list.clear()
            list.replace([100,200, 300])
            list.remove(200)
        }, 2000)

        setTimeout(() => {
            list[0] = 2000
            // 可以增加observable array的元素
            list[2] = 3000
            // 所增加的下标必须是length
            // list[4] = 3000
        }, 3000)
    }

    render(){
        return (
            <div>
                <p>{list.map(v => v) + '!'}</p>
                <p>{`${Array.isArray(list)}`}</p>
                {/*observable创建或者修饰的数组不是真正js数组，如果要判断observable内容是否是数组，要是用一次转换*/}
                {/*判断或者拿observable数组传给第三方库函数，需要对他进行转换为js数组，*/}
                {/*其他的都可以像js数组一样使用，甚至支持所有数组原生方法*/}
                <p>{`${Array.isArray(list.slice())}`}</p>
                <p>{`${list.slice()}`}</p>
            </div>
        )
    }
}

export default tmp